<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>蜗牛商城</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">


    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <!--引入表单校验插件-->
    <script src="/js/bootstrapValidator.min.js"></script>
    <script src="/js/zh_CN.js"></script>

    <!--引入表单校验插件CSS类库-->

    <link href="/css/form.css" rel="stylesheet" />


    <script src="/js/login.js"></script>





    <style>
        img {
            position: relative;
            left: 50px;
            width: 200px;
            height: 60px;
        }
    </style>
    <script>
        $(document).ready(function () {


        });
    </script>
</head>


<body>
<!-- 导航栏 start -->

<nav class="navbar navbar-expand-lg navbar-light  bg-light navbar-ligh navbar-dark bg-dark"
     style="background-color: #124a72;">
    <a class="navbar-brand" href="/woniumall2/index.html">蜗牛图书商城</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/woniumall2/index.html">Home <span class="sr-only">(current)</span></a>
            </li>

        </ul>

        <div class="navbar-nav mr-auto offset-9" >
            <input id="search_text" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button id="seach_btn" class="btn btn-outline-success my-2 my-sm-0">Search</button>
        </div>


    </div>
</nav>
<!-- 导航栏 end -->


<!-- 注册登录  -->
<nav>
    <div class="nav nav-tabs text-center row " id="nav-tab" role="tablist">
        <div class="offset-4"></div>
        <a class="nav-item nav-link active fade show " id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
           aria-controls="nav-home" aria-selected="true">登录</a>
        <a class="nav-item nav-link fade" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
           aria-controls="nav-profile" aria-selected="false">注册</a>

        <a class="nav-item nav-link fade" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
           aria-controls="nav-contact" aria-selected="false">Contact</a>

    </div>
</nav>

<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

        <div class="container">
            <div class="row">

                <div class="col-sm-6 offset-3 ">

                    <form id="loginForm">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Username</label>
                            <input type="text" class="form-control" id="account" name="username" aria-describedby="emailHelp"
                                   value="zhangsan">
                        </div>

                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="password_login" name="password">
                        </div>

                        <!-- 验证码start -->
                        <div class="form-inline">
                            <label for="verifycode">验证码：</label>
                            <input type="text" name="verifycode" class="form-control" id="verifycode_login" placeholder="请输入验证码"
                                   style="width: 120px;" />
                            <img id="img1" src="/code/generate" title="看不清点击刷新">

                        </div>
                        <!-- 验证码end -->
                        <button type="button" class="btn btn-primary " id="login_btn" class="form-control">登录</button>
                        <button id="regist" type="button" class="btn btn-primary" id="login_btn">注册</button>
                    </form>
                </div>
            </div>
        </div>




    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"
         style="background: url('/images/background_images/2222.jpg') no-repeat center;">

        <h3 style="text-align: center;">用户注册</h3>
        <div class=" row offset-4 col-4">
            <form id="registerForm" class="container-fluid">

                <div class="form-group  has-feedback has-success">
                    <label for="username">用户名：</label>
                    <input type="text" name="username" class="form-control is-invalid" id="username" placeholder="请输入用户名" />
                    <span id="status"></span>
                </div>

                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" name="password" class="form-control" id="password_regist" placeholder="请输入密码" />
                </div>

                <div class="form-group">
                    <label for="repassword">再次输入密码：</label>
                    <input type="password" name="repassword" class="form-control" id="repassword" placeholder="请再次输入密码" />
                </div>



                <div class="form-group">
                    <label for="email">Email：</label>
                    <input type="text" name="email" class="form-control" id="email" placeholder="请输入邮箱" />
                    <span id="email_status"></span>
                </div>



                <div class="form-group">
                    <label>性别：</label>
                    <label class="radio-inline" id="t1">
                        <input type="radio" name="gender" checked="checked" value="0"> 男
                    </label>
                    <label class="radio-inline" id="t2">
                        <input type="radio" name="gender" value="1"> 女
                    </label>
                </div>

                <div class="form-inline">
                    <label for="verifycode">验证码：</label>
                    <input type="text" name="verifycode" class="form-control" id="verifycode_regist" placeholder="请输入验证码"
                           style="width: 120px;" />
                    <img id="img2" src="/woniumall2/code/generate" title="看不清点击刷新">

                </div>

                <span id="code_ver_span" class="text-danger"></span>
                <hr />
                <div class="form-group" style="text-align: center;">
                    <button class="btn btn-lg btn-primary btn-block disabled fade" name="submit_btn" type="button" value="注册"
                            id="regist_btn">用户注册</button>
                    <button class="btn btn-lg btn-primary btn-block" name="submit_btn" type="button" value="注册"
                            id="login">登陆</button>
                </div>
            </form>

            <!-- 出错显示的信息框 -->
            <div id="error_div" class="alert alert-warning alert-dismissible text-center fade" role="alert"
                 style="position: relative;left: 20px;width: 90%">
                <button type="button" class="close" data-dismiss="alert">
                    <span>&times;</span>
                </button>
                <strong id="errorMsg">注册校验信息回显框</strong>
            </div>
        </div>


    </div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

<!-- 退出跳转start -->
<div class="modal fade" id="login_Popup" tabindex="-1" role="dialog" aria-labelledby="login_Popup_label"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="login_Popup_label">注册成功</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                正在跳转到登陆页面
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="now_time">立刻跳转</button>

            </div>
        </div>
    </div>
</div>
<!-- 退出跳转start -->

</body>

</html>